<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('translationImage.fqc')" :leftType="'1'"  @clickLeftBack="clickLeftBack"  @clickRight="clickRight" scanType="1"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto" :style="'height: calc(100vh - '+ navHeight +'px);'">
				<!-- 扫描条码 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('distributedEnter.barcodeScan')}}
					</view>
					<view class="custom-card-scan">
						<uni-easyinput type="search" class="uni-mt-5" suffixIcon="scan" v-model="data.scanValue" :placeholder="$t('stockManage.pleaseScanCode')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>
				</view>
				<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top">
					<view class="gui-title-line"></view>
					<text class="gui-primary-text gui-h6" style="padding-left:50rpx; padding-right:50rpx;">{{$t('translationImage.fqcInfo')}}</text>
					<view class="gui-title-line"></view>
				</view>
				<view class="element-auto gui-margin-top card-my">
					<view class="card-boxCustom" v-for="(x,i) in data.list" @click="goPage(x)">
						<view class="card-body">
							<view class="card-body-item flexclass">
								<view class="body-item-title setWith">{{$t('distributedEnter.materialCode')}}：</view>
								<view class="flex1 maxWith">{{x.materialCode}}</view>
							</view>
							<view class="card-body-item flexclass">
								<view class="body-item-title setWith">{{$t('distributedEnter.materialName')}}：</view>
								<view class="flex1">{{x.materialName}}</view>
							</view>
							<view class="card-body-item flexclass">
								<view class="body-item-title setWith">{{$t('distributedEnter.materialSpec')}}：</view>
								<view class="flex1">{{x.materialSpec}}</view>
							</view>
							<view class="card-body-item">
								<view class="card-item-50">
									<text class="body-item-title"> {{$t('translationImage.scanQty')}}：</text>{{x.currentQty}}
								</view>
								<view class="card-item-50">
									<text class="body-item-title"> {{$t('stockManage.materialUnit')}}：</text>{{x.unit}}
								</view>
							</view>
							<!-- 待检不合格 能检验   合格不能检验该条码已检验合格不需要重复检验 :text="$t('translationImage.starCheckout')"-->
							<uni-tag class="icq-status-tag" style="font-size: 16rpx;" :inverted="true" text="待检"  type="primary" />
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		navigate
	} from '@/utils/routerSkip.js';
	import {
		selectWmsBarcodeInfo
	} from '@/api/api.js'
	import pdaScan from '@/hooks/pdaScan.js'
	import { basPdaOperationLogFn } from '@/utils/index.js';
	import { OPERATION_CHOOSE, OPERATION_SCAN } from '@/constant/index.js'
	import {
		reactive,
		ref,
		onMounted,
		computed,
		watch,
		toRaw,
		onUnmounted
	} from 'vue';
	import {
		useStore
	} from "vuex";
	import {
		sortClass
	} from '@/utils/index.js'
	import { onBackPress } from '@dcloudio/uni-app';
	//JS国际化引入
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

	let store = useStore();
	const { scan } = pdaScan()
	let data = reactive({
		scanValue:'',
		list:[]
	})
	// 页面底部高度
	const navHeight = computed(()=>{
		return store.state.navHeight
	})
	// fqc扫描条码
	data.scanList = computed(() => {
		return store.state.fqcScanList
	})
	//把扫描条码变为物料集合的二维数组
	watch(()=>data.scanList, (newVal, oldVal) => {
		console.log('newVal, oldVal', newVal, oldVal)
		console.log(data.scanList)
		let tepData = toRaw(newVal)
		let list = sortClass(tepData)
		console.log(list,'listlistlistlist')
		let tepList = []
		list.forEach(x => {
			let item = {
				child:[],
				currentQty:0
			}
			x.forEach(k=>{
				item.materialCode = k.materialCode
				item.materialName = k.materialName
				item.materialSpec = k.materialSpec
				item.unit = k.unit
				item.currentQty += Number(k.currentQty)
				item.child.push(k)
			})
			tepList.push(item)
		});
		console.log(tepList)
		data.list = tepList
		// data.list = [{
		// 	materialCode:'1231231231231231231231materialCode',
		// 	materialName:'materialNamematerialNamematerialNamematerialName',
		// 	materialSpec:'11cm*123cm*1240cm*3456cm*10102003203cm',
		// 	currentQty:'100',
		// 	unit:'物料单位'
		// }]
	}, {
		immediate: true,
		deep: true
	});
	onMounted(() => {
		console.log('开始监听PDA扫码')
		uni.$on('scancodedate', (data) => {
			console.log('获取到的code：' + data.code)
			getCode(data.code, 'pda')
		})
	})
	onBackPress((options) => {
		if (options.from == 'backbutton') {
			navBackCheck()
			return true;
		}
	})
	//导航栏左侧返回
	const clickLeftBack = () => {
		navBackCheck()
	}
	const navBackCheck = () =>{
		if(!data.scanList.length){
			uni.navigateBack({
				delta: 1
			});
			return  true
		}
		uni.showModal({
			title: t('smashRemoval.warmPrompt'),
			content: t('materials.unsubmittedDataIn'),
			success: function (res) {
				if (res.confirm) {
					store.commit('removeFqcScanList')
					uni.navigateBack({
						delta: 1
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		return true
	}
	// 用户调起相机扫码
	const iconClick = async (type) => {
		console.log(type)
		if(type === 'suffix'){
		   let code = await scan()
		   getCode(code,'scan')
		}
	}
	// 用户点击键盘上搜索
	const confirm = () => {
		getCode(data.scanValue,'keydown')
	}
	// 获取code
	const getCode = (code,type) => {
		data.scanValue = code
		console.log(`拿到code,code为${code},type类型为${type}`)
		let isTrue = data.scanList.some(x=>x.barcode == code)
		if(isTrue){
			uni.showToast({title:t('JsInternational.scanned'), icon:"none"});
			return;
		}
		let parmes = {
			barcode:code,
			selectType:'FQC'
		}
		selectWmsBarcodeInfo(parmes).then(res=>{
			try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '成品检验'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_SCAN
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			console.log(res)
			if(res.status == 200){
				if(res.data.qcStatus=='pass'||res.data.qcStatus=='fail')
				{
					uni.showToast({title:'not waitCheck status! ', icon:"none"});
					return;
				}
				store.commit('addFqcScanList',res.data)
			}else{
				uni.showToast({title:res.message, icon:"none"});
			}
		})
	}
	//跳转扫码记录页
	const clickRight = () => {
		navigate({
			url: '/pages/qms/fqcRecord'
		})
	}
	//跳转检测页面
	const goPage = (x) => {
		store.commit('editFqcInfo',x)
		try {
			let inputParameter = x.materialCode
			let returnParameter = '无'
			let operationPicture = '成品检验'
			let callInterface = '无'
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode:'无',//返回状态
				errorMessage:'无',//错误信息
				isPass:'Y',//是否成功 Y N
				operationType:OPERATION_CHOOSE
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
			
		}
		navigate({
			url: `/pages/qms/fqcInput?materialCode=${x.materialCode}`
		})
	}
</script>

<style scoped lang="scss">
	.icq-status-tag{
		position: absolute;
		right: 0;
		top: 0;
	}
	.flexclass{
		display: flex;
		align-items: flex-start;
	}
	.setWith{
		flex: 1;
	}
	.flex1{
		width: 80%;
		word-wrap: break-word;
        word-break: normal;
		// flex: 4;
		
	}
	.maxWith{
		box-sizing: border-box;
		padding-right: 150rpx;
	}
</style>
